<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
<script src="{{URL::asset('js/jquery.min.js')}}"></script>
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
<style media="screen">
#main .myForm{
	max-width: 600px;
}
</style>
<div id="main">
	<el-row>
		<el-col :md="24">
			<el-card class="el-card-box">
				<el-form label-width="100px" :model="form" :rules="rules" ref="edit_form" class="myForm">
					<el-form-item label="名称" prop="label">
						<el-input v-model="form.label" required clearable></el-input>
					</el-form-item>
					<el-form-item label="描述" prop="desc">
						<el-input v-model="form.desc" type="textarea"></el-input>
					</el-form-item>
					<el-form-item label=" ">
						<el-button type="primary" plain @click="doSubmit">提交</el-button>
						<a href="/admin/api_mgr">
							<el-button type="info" plain>返回</el-button>
						</a>
					</el-form-item>
				</el-form>
			</el-card>
		</el-col>
	</el-row>
</div>
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:function() {
		return {
			form:{
				id:"{{$TabInfo['id']}}",
				label:"{{$TabInfo['label']}}",
				desc:"{{$TabInfo['desc']}}",
				_token:"{{csrf_token()}}",
			},
			rules:{
				label:[
					{required:true,message:'请填写名称',trigger:['blur','change']},
					{min:2,max:45,message:'长度在2到45个字符',trigger:['blur','change']}
				],
				desc:[
					{max:255,message:'长度最多255个字符',trigger:['blur','change']}
				]
			}
		}
	},
	methods:{
		doSubmit(){
			this.$refs["edit_form"].validate((valid) => {
				if (valid) {
					let url = "{{URL::asset('admin/api_mgr')}}/{{$TabInfo['id']}}";
					let param = this.form;
					$.ajax({
				        method:'PUT',
				        url:url,
				        data:param,
				        success:function(res){
				            main.ajaxResponse(res);
				        },
				        error: function () {
				            main.$notify.error({title:"Error",message:"请求失败，请稍后..."});
				        }
				    });
				}else{
					this.$notify.info({title:"Notice",message:'填写不符合要求，请修改后再提交'});
				}
        	});
		},
		ajaxResponse(res) {
			if(res.code == 1){
				this.$confirm(res.msg,'Success', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'Success'
		        }).then(() => {
					window.location.href = "{{URL::asset('admin/api_mgr')}}";
		        }).catch(() => {
					window.location.href = "{{URL::asset('admin/api_mgr')}}";
				});
			}else{
				this.$notify.error({title:"Error",message:res.msg});
			}
		},
	}
});
</script>
